<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
    >
      <!-- :http-request="httpRequest" -->
      <img v-if="value" :src="value" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <i v-if="value" class="el-icon-delete del" @click="closeEvent" />
    <i v-if="value" class="el-icon-zoom-in edit" @click="showBigImg = true" />
    <el-dialog width="700px" title="图片预览" :visible.sync="showBigImg"
      ><div style="text-align: center">
        <img :src="value" alt="" width="100%" /></div
    ></el-dialog>
    <!-- 进度条 -->
    <el-progress v-if="isLoading" :percentage="percentage" />
  </div>
</template>

<script>
import { questionUpload, uploadAvatar } from "@/api/register";
const COS = require("cos-js-sdk-v5");

const cos = new COS({
  SecretId: "AKIDqaRwQtRuACHLVWKvO9g2FF2g7KI1WxKl",
  SecretKey: "TsYH44FQc0QzY7sd5dBD7667KarDZD3w",
});
export default {
  // model: { prop: { input: 'input', value: 'value' }},
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      imageUrl: "",
      showBigImg: false,
      isLoading: false,
      percentage: 0,
    };
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log(cos);

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async handleAvatarSuccess(res, file) {
      const data = new FormData();
      data.append("file", file.raw);
      const response = await questionUpload(data);
      console.log("response", response);
      // this.$emit(
      //   "input",
      //   "http://localhost/heimamm/public/" + response.data.url
      // );
      const data2 = new FormData();
      data2.append("image", file.raw);
      const responses = await uploadAvatar(data2);
      console.log("responses", responses);
      this.$emit(
        "input",
        "http://localhost/heimamm/public/" + responses.data.file_path
      );
      // this.$emit("input", responses.data.file_path);
      this.$emit("avatarPath", responses.data.file_path);
      // this.value = "http://" + response.data.url;
    },
    // async httpRequest(res) {
    //   // 上传中的操作
    //   // this.$emit('input', '')
    //   this.isLoading = true;
    //   console.log("res.file ", res.file);
    //   const response = await questionUpload({ file: { ...res.file } });
    //   console.log("upload", response);
    //   console.log("httpRequest", res);
    //   cos.putObject(
    //     {
    //       Bucket: "steve-1314093107" /* 必须 */,
    //       Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
    //       Key: res.file.name /* 必须 */,
    //       StorageClass: "STANDARD",
    //       Body: res.file, // 上传文件对象
    //       onProgress: (progressData) => {
    //         console.log(JSON.stringify(progressData));
    //         this.percentage = +(progressData.percent * 100).toFixed(2);
    //         if (progressData.percent === 1) {
    //           this.isLoading = false;
    //         }
    //       },
    //     },
    //     (err, data) => {
    //       console.log(err || data);
    //       if (!err) {
    //         // this.imageUrl = 'http://' + data.Location
    //         this.$emit("input", "http://" + data.Location);
    //       }
    //     }
    //   );
    // },
    closeEvent() {
      this.$emit("input", "");
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}
.upload {
  position: relative;
  width: 178px;
  &:hover {
    .del,
    .edit {
      display: block;
    }
  }
  .del,
  .edit {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 26px;
    color: #90f;
    cursor: pointer;
    display: none;
  }
  .edit {
    right: 40px;
  }
}
</style>
